<template>
  <div class="my-notify">
    <sec-ext-table
      :selection="false"
      :default-sort="sortProp"
      ref="secTableRef"
      :tableData="tableData"
      :tableCol="tableCol"
      :filterCol="filterCol"
      @filter-confirm="filterConfirm"
      @search-change="searchChange"
      @sort-change="sortChange"
    >
      <template v-slot:leader="{ data }">
        <dc-user :name="data.row.leader"></dc-user>
      </template>
    </sec-ext-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      background
      :layout="layout"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :total="totalSize"
    >
    </el-pagination>
  </div>
</template>

<script>
import { paginationMixin } from "@/mixins/pagination";
import { getFeModelCfgList } from "api/riskCenterApi";
import { informWorkListApi } from "api/taskCenterApi";
export default {
  name: "myNotify",
  props: {},
  mixins: [paginationMixin],
  components: {},
  data() {
    return {
      tableCol: [],
      tableData: [],
      filterCol: [],
      searchVal: "",
      sortProp: { prop: "createTime", order: "descending" }, //排序的数据
      filter: [],
    };
  },
  computed: {},
  created() {
    this.operation = {
      type: "operation",
      label: "操作",
      width: 80,
      children: [
        {
          label: "详情",
          click: ({ row }) => {
            this.handleCheckDetail(row, true);
          },
        },
      ],
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      this.initTableCol();
      this.initTableData();
    },
    getParams() {
      let { status } = this.$route.params;
      return {
        type: this.type,
        status,
      };
    },
    searchChange(val) {
      console.log("[ val ] >", val);
      this.searchVal = val;
      this.page = 1;
      this.initTableData();
    },
    filterConfirm(data) {
      this.filter = data;
      this.page = 1;
      this.initTableData();
    },
    sortChange({ column }) {
      //如果取消排序，把字段值也赋值成空
      let prop = column.order ? column.property : "";
      this.sortProp = { prop, order: column.order };
      this.initTableData();
    },
    initTableCol() {
      getFeModelCfgList({ type: "order", source: "" }).then((res) => {
        let data = res.data;
        console.log("[ data ] >", data);
        let { tableCol, filterCol } = new this.ConfigCondition({
          data: data,
          // exclude: ["uniqueId"],
          type: { slot: ["leader"] },
        });
        this.tableCol = tableCol;
        this.tableCol.push(this.operation);

        this.filterCol = filterCol;
      });
    },
    formatSort(orderParams) {
      if (!orderParams) return "";
      let order = "";
      if (orderParams == "ascending") {
        order = "asc";
      } else if (orderParams == "descending") {
        order = "desc";
      }
      return order;
    },
    initTableData() {
      let loading = this.openLoading();
      let { prop, order } = this.sortProp;
      informWorkListApi({
        pageNum: this.page,
        pageSize: this.pageSize,
        searchCnt: this.searchVal,
        filter: this.filter,
        orderField: prop, //排序字段
        sort: this.formatSort(order), //排序方式
      }).then((res) => {
        loading.close();
        this.tableData = res.data || [];
        console.log("[ res ] >", res);
        this.totalSize = res.count;
      });
    },
    handleCheckDetail(row, isDetail) {
      this.utils.$router(
        {
          path: `/task/${row.status}/${row.source}`,
          query: {
            type: row.type,
            processId: row.processId,
            uniqueId: row.uniqueId,
            caseId: row.caseId,
            isDetail,
            hideOptBtn: true,
          },
        },
        "_blank",
      );
    },
    // 页码变更
    handleCurrentChange(val) {
      this.page = val;
      this.initTableData();
    },
    // 条数变更
    handleSizeChange(val) {
      this.pageSize = val;
      this.initTableData();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
